<!-- 
  open
  opend
  open-auto-focus
  close-auto-focus
  请写在业务页面调取op-dialog 标签上可直接使用，close，closed需此组件通过emit抛出
 -->

<template>
  <el-dialog
    v-model="dialogVisible"
    :show-close="false"
    class="opDialog"
    :align-center="center"
    :fullscreen="fullscreenValue"
    :width="dialogWidth"
    @close="close"
    @closed="closed"
  >
    <!-- v-bind="$attrs" -->
    <!-- :close="close" -->
    <!-- 对话框顶部 -->
    <template #header="{ close }">
      <div class="opDialogHeader">
        <div class="headerTitleWrap">
          <span>{{ props.title }}</span>
          <el-tooltip effect="dark" :content="titleTip" placement="bottom" v-if="titleTip">
            <el-icon class="titleTip"><Warning /></el-icon>
          </el-tooltip>
        </div>
        <div class="headerActionWrap">
          <img
            src="@/assets/image/fullscreen_new.png"
            @click="handlefullscreen"
            style="margin-right: 10px"
          />
          <img src="@/assets/image/close.png" @click="close" />
        </div>
      </div>
    </template>
    <!-- 对话框内容 -->
    <div
      class="opDialogBody"
      :style="{
        height: fullscreenValue ? '100%' : height,
        maxHeight: fullscreenValue ? '100%' : maxHeight,
        paddingBottom: footer ? 0 : '15px',
        ...dialogBodyStyle,
      }"
      v-loading="loading"
    >
      <slot />
    </div>
    <!-- 对话框底部 -->
    <template #footer v-if="props.footer">
      <div class="opDialogFooter">
        <op-button-list
          @buttonClick="buttonClick"
          :button-list="dialogButtonList"
          :commonStyle="{ width: '104px', height: '28px' }"
        ></op-button-list>
      </div>
    </template>
  </el-dialog>
</template>
<script setup>
const props = defineProps({
  header: {
    type: Boolean,
    default: true,
  },
  footer: {
    type: Boolean,
    default: true,
  },
  title: {
    type: String,
    default: '',
  },
  titleTip: {
    type: String,
    default: '',
  },
  // mini 用于确认对话框 small 宽度500 normal 宽度800 big 宽度960
  size: {
    type: String,
    default: '',
  },
  height: {
    type: String,
    default: 'auto',
  },
  maxHeight: {
    type: String,
    default: '620px',
  },
  // 仅当传入的center为false，才可设置top值
  center: {
    type: Boolean,
    default: true,
  },
  fullscreen: {
    type: Boolean,
    default: false,
  },
  loading: {
    type: Boolean,
    default: false,
  },
  buttonList: {
    type: Array,
    default: () => [],
  },
  confirmLabel: {
    type: String,
    default: 'Confirm',
  },
  dialogBodyStyle: {
    // 设置dialog 内容样式
    type: Object,
    default: () => ({}),
  },
  btnLoading: {
    // 公共按钮loading
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(['close', 'closed', 'confirm', 'isfullscreen','cancel']);

let dialogVisible = ref(false);
let fullscreenValue = ref(props.fullscreen);

let tempData = ref(null);

const init = row => {
  tempData.value = row ? row : null;
  dialogVisible.value = true;
};

const destroy = () => {
  dialogVisible.value = false;
};

const close = () => emits('close');

const closed = () => emits('closed');

const buttonClick = ({ prop }) => {
  switch (prop) {
    case 'cancel':
      destroy();
      close();
      emits('cancel', tempData.value, prop);
      break;
    case 'confirm':
      emits('confirm', tempData.value);
      break;
    default:
      emits('confirm', tempData.value, prop);
      break;
  }
};

const handlefullscreen = () => {
  fullscreenValue.value = !fullscreenValue.value;
  emits('isfullscreen', fullscreenValue.value);
};

const dialogWidth = computed(() => {
  let width = '';
  switch (props.size) {
    case 'big':
      width = '960px';
      break;
    case 'normal':
      width = '800px';
      break;
    case 'small':
      width = '500px';
      break;
    default:
      width = '500px';
      break;
  }
  return width;
});

const dialogButtonList = computed(() => {
  if (props?.buttonList?.length) {
    return props.buttonList;
  } else {
    return [
      { prop: 'cancel', label: 'Cancel', type: '', disabled: props.btnLoading },
      {
        prop: 'confirm',
        label: props.confirmLabel,
        type: 'primary',
        loading: props.loading || props.btnLoading,
      },
    ];
  }
});

defineExpose({ init, destroy });
</script>

<style lang="scss">
.opDialog {
  display: flex;
  flex-direction: column;
  .el-dialog__header {
    margin: 0;
    padding: 0;
  }
  .el-dialog__body {
    flex: 1;
    overflow: hidden;
    padding: 0;
  }
  .el-dialog__footer {
    padding: 0px;
  }
}
</style>

<style lang="scss" scoped>
.opDialogHeader {
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 15px;
  border-bottom: solid 1px #ccc;
  box-sizing: border-box;
  .headerTitleWrap {
    display: flex;
    align-items: center;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #606266;
    font-weight: 600;
    font-size: 16px;
    color: #303133;

    .titleTip {
      color: #127bbc;
      margin-left: 10px;
      cursor: pointer;
    }
  }
  .headerActionWrap {
    display: flex;
    align-items: center;
    img {
      width: 24px;
      cursor: pointer;
    }
  }
}
.opDialogBody {
  box-sizing: border-box;
  padding: 15px;
  overflow: auto;
}
.opDialogFooter {
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0 15px;
}
</style>
